<!DOCTYPE html>
<html>
	<!--
		作者：offline
		时间：2018-06-27
		描述：员工信息查询
	-->

	<head>
		<!-- 引入框架文件 -->
		<script type="text/javascript" src="../../model/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="../../model/models.js"></script>
		<script type="text/javascript" src="../../model/dispose.js"></script>
		<style type="text/css">
			.show th {
				text-align: center;
			}
		</style>
		<style type="text/css">
			td,
			th {
				text-align: center;
			}
		</style>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>

		<div include="../../static/header.htm"></div>
		<div style="height: 100%;float: left;" include="../../static/aside.htm"></div>

		<div class="aside2">
			<div include="../../static/empManage.htm"></div>
		</div>

		<div class="section">
			<div style="color: white;font-size: 36px;text-align: center; width: 100%; height: 70px;" class="head"><b>员工查询</b></div>
			<div class="content">
				<div class="">
					<!-- 搜索输入框 -->
					<form id="queryEmp">
						<input id="key" class="form-control" style="width: 250px; float: left;margin-right: 10px;" placeholder="员工编号/姓名/部门/岗位" type="text" />
						<input style="margin: 2px 5px; width: 100px;" type="submit" value="查询" class="btn btn-danger" />
					</form>
				</div>
				<!-- 信息显示 -->
				<div class="show">
					<table class="table table-striped">
						<thead>
							<tr>
								<th>员工编号</th>
								<th>姓名</th>
								<th>性别</th>
								<th>部门名称</th>
								<th>岗位名称</th>
								<th>联系电话</th>
								<th>电子邮件</th>
								<th>所学专业</th>
								<th>毕业院校</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="empTbody">
							<!--<tr>
								<td>007</td>
								<td>小七</td>
								<td>java</td>
								<td>架构师</td>
								<td>666666</td>
								<td>66666@qq.com</td>
								<td>计算机</td>
								<td>乐山师院</td>
								<td>删除</td>
							</tr>-->
						</tbody>
					</table>
					<!-- 分页开始 -->
					<nav id="page" style="position: absolute; bottom: 20px;" aria-label="Page navigation">
						<ul id="pagination" class="pagination">
							<li>
								<a href="#" aria-label="Previous">
									<span aria-hidden="true">&laquo;</span>
								</a>
							</li>
							<li>
								<a href="#" aria-label="Next">
									<span aria-hidden="true">&raquo;</span>
								</a>
							</li>
						</ul>
					</nav>

					<!-- 分页结束 -->

				</div>
			</div>
		</div>
	</body>

	<script type="text/javascript">
		// 查找函数的封装
		function findBykey(key, page) {

			//$self.serialize(); 将表单中的数据进行序列化
			//async:true 采用异步操作
			$.ajax({
				type: "post",
				url: "http://localhost:9090/findEmpByKey?key=" + key + "&page=" + page,
				"success": function(obj) {
					if(null != obj.data) {
						var list = obj.data;

						var $tbody = $("#empTbody");
						$tbody.html("");
						// 传入分页的id
						upPage("pagination", obj.page);

						if(null == list.length) {
							
							var emp = list;

							var $tr = $("<tr id='del" + emp.id + "'></tr>");

							var j = 0;
							for(var index in emp) {
								if(j > 8)
									break;
								if("empDiv" == index && emp[index] != null) {
									var $td = $("<td><a href='#' onclick='updateDepa(" + emp.id + ")'>" + emp[index].depaName + "</a></td>")
								} else if("empPost" == index && emp[index] != null) {
									var $td = $("<td><a href='#' onclick='updatePost(" + emp.id + ")'>" + emp[index].postName + "</td>")
								} else {
									var $td = $("<td>" + emp[index] + "</td>")
								}

								$tr.append($td);
								j++;
							}

							$tr.append("<td><a href='#' onclick='updateEmp(" + emp.id + ")'>修改</a><a onclick='return delEmp(" + emp.id + ")' href='function:;'>删除</a></td>");
							$tbody.append($tr);
						} else {
							for(var i = 0; i < list.length; i++) {
								var emp = list[i];

								var $tr = $("<tr id='del" + emp.id + "'></tr>");

								var j = 0;
								for(var index in emp) {
									if(j > 8)
										break;
									if("empDiv" == index && emp[index] != null) {
										var $td = $("<td><a href='#' onclick='updateDepa(" + emp.id + ")'>" + emp[index].depaName + "</a></td>")
									} else if("empPost" == index && emp[index] != null) {
										var $td = $("<td><a href='#' onclick='updatePost(" + emp.id + ")'>" + emp[index].postName + "</td>")
									} else {
										var $td = $("<td>" + emp[index] + "</td>")
									}

									$tr.append($td);
									j++;
								}

								$tr.append("<td><a href='#' onclick='updateEmp(" + emp.id + ")'>修改</a><a onclick='return delEmp(" + emp.id + ")' href='function:;'>删除</a></td>");
								$tbody.append($tr);
							}
						}
					}
				},
				"dataType": "json",
				async: true
			});
		}

		$("#queryEmp").submit(function(e) {
			var key = $("#key").val();
			//阻止表单默认事件,不让表单跳转到其它页面
			e.preventDefault();

			//jq的回调函数中的this,一般表示该事件源,即触发事件的元素
			var $self = $(this);

			findBykey(key, 1);

		})

		function delEmp(id) {
			var txt = "确认删除编号为：" + id + "  的员工";
			window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.warning, {
				onOk: function() {
					$.ajax({
						type: "post",
						url: "http://localhost:9090/delEmp?id=" + id,
						"success": function(obj) {
							if(obj.data) {
								$("#del" + id).html("");
							} else
								window.wxc.xcConfirm("删除失败！", window.wxc.xcConfirm.typeEnum.error);
						},
						"dataType": "json",
						async: true
					});
				}
			});
			return flag;
		};

		function updateEmp(id) {
			window.location.href = 'empAmend.html?id=' + id;
		}

		function updateDepa(id) {
			window.location.href = "empRemoveDepa.html?id=" + id;
		}

		function updatePost(id) {
			window.location.href = "empRemovePost.html?id=" + id;
		}

		function pageSkip(page) {
			var key = $("#key").val();

			findBykey(key, page);
		}
	</script>

</html>